<!-- 歌单列表 -->
<template>
	<div class="resourcelist">
		<div class="resourcelist-item" v-for="lis in list" :key="lis.id" @click.stop="toSongsList(lis.id, lis.picUrl)">
			<div class="resourcelist-item-imgbox">
				<img :src="lis.picUrl || lis.coverImgUrl" alt="">
				<div class="playcount">
					<play-circle-outlined />
					{{ lis.playcount > 99999999 ? Math.floor(lis.playcount / 10000000) + '亿' : (lis.playcount > 9999 ? Math.floor(lis.playcount / 10000) + '万' : lis.playcount) }}
				</div>
				<div class="resourcelist-item-imgbox__icon" @click="playAll(lis.id)">
					<span></span>
				</div>
			</div>
			<span class="resourcelist-item-title">{{ lis.name }}</span>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, toRef } from 'vue';
import type { IEverydayRecommendResource } from '@/api/recommendApi'
import { PlayCircleOutlined } from '@ant-design/icons-vue';
import router from '@/router/index'
import bus from '@/utils/bus'

const props = defineProps(['resourcelist'])
const list = toRef<IEverydayRecommendResource[]>(props, ['resourcelist'])
list.value = props.resourcelist

const playAll = (id: number) => {
	bus.$emit('playall', id)
}

const toSongsList = (id: number, img: string) => {
	router.push({
		name: 'songsList',
		query: {
			id,
			img
		}
	})
}
</script>

<style lang="scss" scoped>
.resourcelist {
	display: flex;
	justify-content: start;
	flex-direction: row;
	flex-wrap: wrap;

	&-item {
		width: 15vw;
		// height: 17vw;
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		margin-bottom: 2vw;
		margin-right: 1.5vw;

		&-imgbox {
			width: 15vw;
			height: 15vw;
			margin-bottom: 5px;
			border-radius: 5%;
			overflow: hidden;
			cursor: pointer;
			position: relative;

			&:hover &__icon {
			opacity: 1;
		}

			.playcount {
				position: absolute;
				top: .5vw;
				right: 1vw;
				font-size: 1.2vw;
			}

			&__icon {
				background-color: #fff;
				height: 3.5vw;
				width:3.5vw;
				position: absolute;
				bottom: 1vw;
				right: 1vw;
				border-radius: 50%;
				opacity: 0;
				transition: all .5s;

				& > span {
					height: 0;
					width: 0;
					position: absolute;
					border: transparent solid 0.8vw;
					border-left: 1.3vw solid #EC4141;
					top: 0;
					bottom: 0;
					left: 1.2vw;
					margin: auto;
				}
			}
		}

		&-title {
			font-size: 1.2vw;
			cursor: pointer;
			max-height: 3vw;
		}

		&-title:hover {
			color: #FFFFFF;
		}
	}
}
	
</style>